<template>
  <div class="photolist">
    <ul class="photolist-ul">
      <li class="photolist-li" v-for="item in list" :key="item.id">
        <a href="">
          <img v-lazy="item.img" alt="">
          <p>标题：{{ item.title }}</p>
          <span>拍摄时间：{{ item.time }}</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [] // 图片列表的数组
    }
  },
  created() {
    this.getphotolist();
  },
  methods: {
    getphotolist () { // 获取图片列表数据的方法
      this.$http.get("vuephotolist").then(result => {
        if(result.body) {
          //成功了
          this.list = result.body;
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.photolist{
  padding: 4px;
  .photolist-ul{
    padding: 0;
    margin: 0 0 15px 0;
  }
  .photolist-li{
    &,a,img{
      display: block;
      width: 100%;
      height: 100%;
    }
    box-sizing: border-box;
    list-style: none;
    width: 100%;
    padding: 3px;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #666;
    img[lazy="loading"]{
      width: 40px;
      height: 300px;
      margin: auto;
    }
    p{
      font: 14px/20px "宋体";
    }
    span{
      font: 12px/15px "宋体";
    }
  }
}
</style>
